<template>
    <div class="login-wrapper">
        <div class="login-container">
            <div class="login-title">
                <h1>登录</h1>
            </div>
            <div>
                <t-form ref="form" :data="loginForm" :rules="rules" :label-width="0" @submit="handleSubmit">
                    <t-form-item name="email">
                        <t-input v-model="loginForm.email" placeholder="请输入您的邮箱" autocomplete="email">
                            <template #prefix-icon>
                                <MailIcon />
                            </template>
                        </t-input>
                    </t-form-item>
                    <t-form-item name="password">
                        <t-input v-model="loginForm.password" type="password" placeholder="请输入您的密码"
                            autocomplete="current-password">
                            <template #prefix-icon>
                                <LockOnIcon />
                            </template>
                        </t-input>
                    </t-form-item>
                    <t-form-item>
                        <t-button type="submit" theme="primary" block>
                            立即登录
                        </t-button>
                    </t-form-item>
                </t-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LockOnIcon, MailIcon } from 'tdesign-icons-vue-next'
import { useRouter } from 'vue-router'

import { MessagePlugin } from 'tdesign-vue-next'

import { login } from '@/api/login'
import { useUserStore } from '@/store'
import { SubmitParams } from '@/types/interface'

const userStore = useUserStore()
const router = useRouter()

interface FormDataType {
    email: string;
    password: string;
}



const form = ref<FormDataType>({
    email: '',
    password: ''
})

const loginForm = ref<FormDataType>({
    email: '',
    password: ''
})

const rules = {
    email: [
        { required: true, message: '请输入邮箱', type: 'error' },
        { email: true, message: '请输入正确的邮箱格式', type: 'error' }
    ],
    password: [
        { required: true, message: '请输入密码', type: 'error' },
        { min: 6, message: '密码长度至少6位', type: 'error' }
    ]
}

const handleSubmit = async ({ validateResult, firstError }: SubmitParams) => {
    if (!validateResult) {
        return;
    }

    try {
        const res = await login(loginForm.value);
        if (res.errcode == 0) {
            userStore.setToken(res.token)
            await userStore.getUser()
            const role = userStore.role;
            MessagePlugin.success('登录成功', 1000).then(() => {
                if (role.includes('admin')) {
                    router.push('/admin')
                } else {
                    router.push('/user')
                }
            })
        }
    } catch (error) {
    }
}

</script>

<style scoped>
.login-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #e0e6ed; */
    background-image: url('@/assets/images/login-bg.webp');
    background-size: cover;
    background-position: 100%;
    position: relative;
}

.login-container {
    width: 100%;
    padding: 50px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background-color: #ffffff;
    max-width: 300px;
}

.login-title {
    margin-bottom: 20px;
}

.login-title h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0a1633;
    text-align: center;
}
</style>
